<template>
	<view class="miner-buy">
		<view class="page-title">矿机购买</view>
		<view class="page-sub-title">矿机支持用USDT进行兑换</view>
		<view class="balance">您的资产：{{usdt}} USDT {{sid}} SID</view>
		<view class="miner-lists">
			<view class="item-box">
				<block v-for="(val,index) in minerList" :key="index">
					<view class="item" @click="minerDetail(val)">
						<view class="title">
							<view class="icon-text text-highlight">{{val.name}}</view>
						</view>
						<view class="content">
							<view class="content-left">
								<image mode="widthFix" src="../../static/icon/pool_dig_img.png"></image>
							</view>
							<view class="content-right">
								<view class="row">
									<view class="label text-dark">单台金额</view>
									<view class="value">
										<view class="number text-highlight">{{val.price}}USDT <block v-if="val.price_sid>0">+{{val.price_sid}}SID</block></view>
									</view>
								</view>
								<view class="row">
									<view class="label text-dark">合约周期</view>
									<view class="value">{{val.release_day}}天</view>
								</view>
								<view class="row">
									<view class="label text-dark">每天产币</view>
									<view class="value">{{val.day_amount}}SID</view>
								</view>
								<view class="row">
									<view class="label text-dark">每人限购</view>
									<view class="value">{{val.limit_amount}}台</view>
								</view>
								<view class="row">
									<view class="label text-dark">剩余份额</view>
									<view class="value">{{val.left_amount}}台</view>
								</view>
							</view>
						</view>
						<view class="footer">
							<view class="label">开挖时间</view>
							<view class="value">{{val.about_4}}</view>
						</view>
					</view>

				</block>
			</view>
		</view>
	</view>
</template>

<script>
	import api from "@/utils/api/pool/index.js"
	import walletApi from "@/utils/api/wallet/index.js"
	export default {
		data() {
			return {
				usdt: 0,
				sid: 0,
				minerList: []
			}
		},
		onLoad() {
			this.listBuy();
			this.getbalance();
		},
		methods: {
			async getbalance() {
				let res = await walletApi.getAccount()
				if (res.status == 1) {
					this.usdt = res.data.usdt;
					this.sid = res.data.sid;
				}
			},
			async listBuy() {
				let res = await api.listBuy()
				if (res.status == 1) {
					this.minerList = res.data;
				}
			},
			minerDetail(val) {
				uni.navigateTo({
					url: "buy-miner-detail?data=" + JSON.stringify(val)
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #22192E;
	}
	
	.balance{
		padding-bottom: 5px;
		font-weight: bold;
		color: #31E8D6;
	}

	view {
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
	}

	.miner-buy {
		padding: 15px;

		.page-title {
			font-size: 20px;
			font-weight: bold;
		}

		.page-sub-title {
			font-size: 12px;
			color: #D6E0F1;
			margin-bottom: 10px;

		}

		.miner-lists {
			.item-box {
				.item {
					background-color: #071824;
					background-image: url(../../static/background/pool_bg.png);
					background-size: cover;
					border-radius: 12px;
					box-shadow: 0 0 15px rgba(0, 0, 0, .1);
					padding: 15px;
					margin-bottom: 15px;

					.title {
						flex-direction: row;
						padding-bottom: 5px;

						.icon {
							width: 20px;
							height: 20px;
							margin-right: 5px;

							image {
								width: 100%;
							}
						}

						.icon-text {
							justify-content: center;
							font-weight: bold;
							font-size: 16px;
						}
					}

					.content {
						flex-direction: row;
						justify-content: space-between;

						.content-left {
							width: 30%;
							justify-content: center;

							image {
								width: 100%;
							}
						}

						.content-right {
							width: 70%;
							padding-left: 15px;

							.row {
								justify-content: space-between;
								flex-direction: row;
								padding: 3px 0;
								opacity: .8;

								.label {
									color: #D6E0F1;
								}

								.value {
									font-weight: bold;
								}

								.value.price {
									flex-direction: row;

									.number {
										font-size: 16px;
										color: #0853C3;
										height: 16px;
									}

									.unit {
										font-size: 10px;
										color: #0853C3;
										justify-content: flex-end;
									}
								}
							}
						}

					}

					.footer {
						flex-direction: row;
						padding-top: 10px;
						border-top: 1px solid #141F31;
						justify-content: space-between;

						.label {
							color: #666;
							font-size: 12px;
						}

						.value {
							font-size: 12px;
						}
					}
				}
			}
		}
	}
</style>
